<template>
	<view class="container">
		<view class="search-header">
			<view class="search-box">
				<input type="text" 
					v-model="searchText" 
					placeholder="请输入搜索内容" 
					class="search-input"
				/>
				<image v-if="searchText" src="../../static/images/clear.png" @click="clearSearch" class="clear-icon"></image>
			</view>
			<view>
				<button type="primary" class="search-btn">搜索</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				
			}
		},
		onLoad: (e) => {
			console.log("e", e);
		},
		methods: {
			async clearSearch() {
				this.searchText = '';
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.search-header {
		padding: 20rpx;
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
	}
	
	.search-box {
		width: 80%;
		background-color: #fff;
		border-radius: 30rpx;
		text-align: center;
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.search-input {
		height: 60rpx;
		font-size: 28rpx;
		padding: 10rpx;
		flex: 1;
	}
	
	.clear-icon {
		position: absolute;
		right: 30rpx;
		padding: 0 10rpx;
		line-height: 1;
		width: 5%;
		height: 37%;
		z-index: 2;
	}
	
	.search-btn {
		border-radius: 30rpx;
		margin-left: 20rpx;	
	}
	
	button[type=primary] {
    background-image: linear-gradient(315deg,#6772FF 0,#ff4444 100%);
    color: #fff;
}
</style>
